首页 > 其他分享 >html5游戏制作入门系列教程（五）

html5游戏制作入门系列教程（五）

时间：2023-06-08 17:34:29浏览次数：58  
标签：教程 iCellSize 入门 canvas html5 context var iCurCelY oTank


我们继续这一系列文章，使用HTML5的canvas组件进行游戏开发。今天，这是相当完整的游戏例子 – 它会回顾经典的旧电脑游戏 – 坦克大战。我会教你使用阵列地图并教你如何检测活动对象（坦克）与环境（基于阵列的地图）的碰撞。

你可以点击这里阅读这一系列教程的前一篇文章：html5游戏制作入门系列教程（四）。我们的将基于之前的程序和代码进行开发。

 

这里有我们的演示和下载包：

在线演示 源码下载

 

好吧，下载所需文件，让我们开始编码！

 

步骤1： HTML
这里是我演示的HTML，非常简单，对不对？

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>html5游戏制作入门系列教程（五）</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<header>
<h2>html5游戏制作入门系列教程（五）</h2>
<a href="http://html5gamedev.org/?p=330" class="stuts">返回原文<span>HTML5GAME</span></a>
</header>

<div class="container">
<canvas id="scene" width="800" height="600"></canvas>
</div>
</body>
</html>

 

步骤2：CSS

下面是使用CSS样式。
css/main.css
今天就不把css样式贴出来了，和以前的一样，没有什么特别之处。你可以在下载包里找到它。

 

步骤3：JS
js/script.js



// inner variables
var canvas, context; // canvas and context objects
var imgBrick, imgSteel, imgWater, imgForest, imgTank; // images
var aMap; // map array
var oTank; // tank object

var iCellSize = 24; // cell wide
var iXCnt = 26; // amount of X cells
var iYCnt = 26; // amount of Y cells

// objects :
function Tank(x, y, w, h, image) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.i = 0;
this.image = image;
}

// functions
function clear() { // clear canvas function
context.clearRect(0, 0, canvas.width, canvas.height);
}

function drawScene() { // main drawScene function
clear(); // clear canvas

// fill background
context.fillStyle = '#111';
context.fillRect(0, 0, canvas.width, canvas.height);

// save current context
context.save();

// walk through our array
for (var y = 0; y < iYCnt; y++) {
for (var x = 0; x < iXCnt; x++) {
switch (aMap[y][x]) {
case 0: // skip
break;
case 1: // draw brick block
context.drawImage(imgBrick, 0, 0, iCellSize, iCellSize, x*iCellSize, y*iCellSize, iCellSize, iCellSize);
break;
case 2: // draw steel block
context.drawImage(imgSteel, 0, 0, iCellSize, iCellSize, x*iCellSize, y*iCellSize, iCellSize, iCellSize);
break;
case 3: // draw forest block
context.drawImage(imgForest, 0, 0, iCellSize, iCellSize, x*iCellSize, y*iCellSize, iCellSize, iCellSize);
break;
case 4: // draw water block
context.drawImage(imgWater, 0, 0, iCellSize, iCellSize, x*iCellSize, y*iCellSize, iCellSize, iCellSize);
break;
}
}
}

// restore current context
context.restore();

// draw tank
context.drawImage(oTank.image, oTank.i*oTank.w, 0, oTank.w, oTank.h, oTank.x, oTank.y, oTank.w, oTank.h);
}
// -------------------------------------------------------------

// initialization
$(function(){
canvas = document.getElementById('scene');
canvas.width = iXCnt * iCellSize;
canvas.height = iYCnt * iCellSize;
context = canvas.getContext('2d');

// main scene Map array
aMap = ([
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 4, 4, 4, 4, 0, 0, 2, 2, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 4, 4, 4, 4, 0, 0, 2, 2, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 4, 4, 4, 4, 1, 1, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0, 2, 2, 0, 0],
[0, 0, 0, 0, 4, 4, 4, 4, 1, 1, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0, 2, 2, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 1, 1, 0, 0, 0, 0],
[0, 0, 2, 2, 0, 0, 0, 0, 4, 4, 4, 4, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 2, 2, 0, 0, 0, 0, 4, 4, 4, 4, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[3, 3, 3, 3, 1, 1, 0, 0, 4, 4, 4, 4, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
[3, 3, 3, 3, 1, 1, 0, 0, 4, 4, 4, 4, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
[3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 2, 2],
[3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 2, 2],
[0, 0, 1, 1, 4, 4, 4, 4, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 4, 4, 4, 4, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[2, 2, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 0, 0, 1, 1, 0, 0],
[2, 2, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0],
[0, 0, 0, 0, 0, 0, 2, 2, 3, 3, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0],
[0, 0, 0, 0, 0, 0, 2, 2, 3, 3, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 2, 2, 0, 0, 0, 0],
[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 2, 2, 0, 0, 0, 0]
]);

// load images
imgBrick = new Image();
imgBrick.src = 'images/brick.png';
imgSteel = new Image();
imgSteel.src = 'images/steel.png';
imgWater = new Image();
imgWater.src = 'images/water.png';
imgForest = new Image();
imgForest.src = 'images/forest.png';

imgTank = new Image();
imgTank.src = 'images/tank.png';
oTank = new Tank(iCellSize*9, iCellSize*24, 48, 48, imgTank);

$(window).keydown(function(event){ // keyboard alerts
switch (event.keyCode) {
case 38: // Up key
oTank.i = 2;

// checking collisions
var iCurCelX = (2 * oTank.x) / 48;
var iCurCelY = (2 * oTank.y) / 48;
if (iCurCelY) {
var iTest1 = aMap[iCurCelY-1][iCurCelX];
var iTest2 = aMap[iCurCelY-1][iCurCelX+1];

if ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3)) {
oTank.y-=24;
if (oTank.y < 0) {
oTank.y = 0;
}
}
}
break;
case 40: // Down key
oTank.i = 3;

// checking collisions
var iCurCelX = (2 * oTank.x) / 48;
var iCurCelY = (2 * oTank.y) / 48;
if (iCurCelY+2 < iYCnt) {
var iTest1 = aMap[iCurCelY+2][iCurCelX];
var iTest2 = aMap[iCurCelY+2][iCurCelX+1];

if ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3)) {
oTank.y+=24;
if (oTank.y > 576) { //iCellSize * (iYCnt-2)
oTank.y = 576;
}
}
}
break;
case 37: // Left key
oTank.i = 1;

// checking collisions
var iCurCelX = (2 * oTank.x) / 48;
var iCurCelY = (2 * oTank.y) / 48;
var iTest1 = aMap[iCurCelY][iCurCelX-1];
var iTest2 = aMap[iCurCelY+1][iCurCelX-1];

if ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3)) {
oTank.x-=24;
if (oTank.x < 0) {
oTank.x = 0;
}
}
break;
case 39: // Right key
oTank.i = 0;

// checking collisions
var iCurCelX = (2 * oTank.x) / 48;
var iCurCelY = (2 * oTank.y) / 48;
var iTest1 = aMap[iCurCelY][iCurCelX+2];
var iTest2 = aMap[iCurCelY+1][iCurCelX+2];

if ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3)) {
oTank.x+=24;
if (oTank.x > 576) { //iCellSize * (iXCnt-2)
oTank.x = 576;
}
}
break;
}
});

setInterval(drawScene, 40); // loop drawScene
});


 

结论
超级酷，不是吗？我会很高兴看到您的评论和意见。祝你好运！

在线演示 源码下载

 

标签：教程,iCellSize,入门,canvas,html5,context,var,iCurCelY,oTank
From： https://blog.51cto.com/u_8895844/6441691

相关文章

  • html5游戏制作入门系列教程（二）
    今天，我们继续html5游戏制作入门系列的系列文章。今天，我们将继续基础知识（也许甚至是高级技巧的基础）。我要告诉你如何具有渐变颜色填充对象，绘制文本，使用自定义的字体绘制文本，基本的动画，以及最重要的UI元素–按钮。 我们以前的文章中，你可以在这里阅读：html5游戏制作入门系列教程（一）。......
  • html5游戏制作入门系列教程（一）
    从今天开始，我们将开始HTML5游戏开发一系列的文章。在我们的第一篇文章中，我们将讲解在画布canvas上的基础工作，创建简单的对象，填充和事件处理程序。另外，要注意在这个阶段中，我们不会立即学习WebGL相关的3D部分。但我们会尽快在未来的WebGL。 在每篇文章中，我们都将学习到一些新的东西......
  • Angular6 教程_编程入门自学教程_菜鸟教程-免费教程分享
    教程简介Angular6是一个JavaScript框架，用于构建JavaScript，html和TypeScript中的Web应用程序和应用程序，它是JavaScript的超集。它是Angular的一个更新版本，相当于angular的6.x版本。Angular6入门教程-从基本到高级概念的简单的步骤了解Angular6，其中包括概述，环境设置，项目设置，......
  • 正则表达式30分钟入门教程(第二版),正则讲解
    作者：mfkidt目录本文目标如何使用本教程什么是正则表达式？入门测试正则表达式元字符字符转义重复字符类反义替换分组后向引用位置指定负向位置指定注释贪婪与懒惰平衡组还有些什么东西没提到一些我认为你可能已经知道的术语的参考网上的资......
  • VSCode 插件开发系列教程
    VSCode插件架构，VSCode是通过Electron实现跨平台的，而Electron则是基于Chromium和Node.js，比如VSCode的界面，就是通过Chromium进行渲染的。同时，VSCode是多进程架构，当VSCode第一次被启动时会创建一个主进程（mainprocess），然后每个窗口，都会创建一个渲染进程（Renderer......
  • uniapp打包所需的ios证书和证书profile文件获取的图文教程
    使用uniapp进行云打包，可以打包android和ios两种app，但是uniapp官方并不能凭空产生这两种平台所需的打包证书。那么这两种打包证书又是如何获取呢？android相对简单，使用jdk的工具生成就可以了，也可以使用香蕉云编来一键生成。但是ios证书的生成就没有这么简单，因为ios证书的生成需要......
  • ESP32-C3入门教程——导读
    文章目录一、环境篇二、基础篇三、系统篇四、WiFi篇五、蓝牙篇六、网络篇七、IoT篇八、问题篇九、ESP-IDF5.x篇十、开源代码十一、视频演示关于更新进度有超链接的文章是已经完成的，可以点击跳转直接看没有超链接的文章是计划要写的，暂时还没写的，我会尽快完成一、环境篇ESP32-C3入......
  • 泰凌微8258入门教程——导读
    基于泰凌微TLSR8258Bluetooth®SIGMesh的入门系列教程本专栏第一阶段的博文撰写在2021年9月份全部完成，主要包括环境篇，开发套件购买+开发环境搭建+开发内容介绍Mesh基础篇，Mesh基础内容Mesh进阶篇，Mesh进阶内容，包含独门绝密内容本专栏第二阶段的博文撰写在2022年3月份再次开启......
  • PowerDesigner使用教程（转）
    PowerDesigner是一款功能非常强大的建模工具软件，足以与Rose比肩，同样是当今最著名的建模软件之一。Rose是专攻UML对象模型的建模工具，之后才向数据库建模发展，而PowerDesigner则与其正好相反，它是以数据库建模起家，后来才发展为一款综合全面的Case工具。PowerDesigner主要分为7种建模文......
  • Vue3从入门到精通(二)
    vue3侦听器在Vue3中，侦听器的使用方式与Vue2相同，可以使用watch选项或$watch方法来创建侦听器。不同之处在于，Vue3中取消了immediate选项，同时提供了新的选项和API。创建侦听器可以使用watch选项或$watch方法来创建侦听器，语法与Vue2相同。示例如下：<template><div>{{messa......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99