JavaScript 推箱子游戏
推箱子游戏的 逻辑非常简单，但是如果不动手的话，还是不太清楚。我在这里讲一下自己的思路。
制作推箱子，首先要有自己的设计素材。如下我也是网上找的素材
第二步，理清游戏的规则。
游戏规则：
1.小人将箱子分别推到球上，等每个箱子都覆盖到球上，则完成游戏。
2.小人不能推树，不能推两个箱子一起
3.小人可以踩球
第三步，简单的理清游戏规则后，就开始选用技术。首先肯定是JavaScript，然后选用canvas。
最后，我们开始制作游戏。
制作游戏其实 也是一步步来。做事不能太急。要分成阶段性来完成，就很方便。
具体代码如下。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<canvas id="canvas" width="560" height="560">
can't see this
</canvas>
<div id="msg"></div>
<img id="block" src="./img/block.gif" alt="" style="display:none;">
<img id="wall" src="./img/wall.png" alt="" style="display:none;">
<img id="box" src="./img/box.png" alt="" style="display:none;">
<img id="down" src="./img/down.png" alt="" style="display:none;">
<img id="left" src="./img/left.png" alt="" style="display:none;">
<img id="right" src="./img/right.png" alt="" style="display:none;">
<img id="up" src="./img/up.png" alt="" style="display:none;">
<img id="ball" src="./img/ball.png" alt="" style="display:none;">
<p id="msg"></p>
<input type="button" value="上一关" onclick="level(-1)">
<input type="button" value="重玩" onclick="level(0)">
<input type="button" value="下一关" onclick="level(1)">
<script src="./js/map.js"></script>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var dWidth = 35,
dHeight = 35;
var iCurLevel = 0; //当前关卡+1
var steps = 0; // 移动步数
var currenMap = [],
userMap = [];
var msg = document.getElementById('msg');
var block = document.getElementById('block');
var wall = document.getElementById('wall');
var box = document.getElementById('box');
var down = document.getElementById('down');
var left = document.getElementById('left');
var right = document.getElementById('right');
var up = document.getElementById('up');
var ball = document.getElementById('ball');
var curMan = down; //小人面向
// 复制二维数组
function copyArray(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
newArr[i] = arr[i].concat();
}
return newArr;
}
// 初始化
function init() {
currenMap = copyArray(levels[iCurLevel]) // 当前原样地图
userMap = copyArray(levels[iCurLevel]) // 当前使用地图
steps = 0; // 初始化步数
curMan = down; // 初始化小人面朝下
msg.innerHTML = "当前第：" + (iCurLevel + 1) + "关，移动步数：" + steps;
drawBlock() // 画草地
drawMap(currenMap) // 画关卡地图
} // 画草地
function drawBlock() {
for (var i = 0; i < 16; i++) {
for (var j = 0; j < 16; j++) {
ctx.drawImage(block, i * dWidth, j * dHeight, dWidth, dHeight); }
}
}
// 画小人位置
function Point(x, y) {
this.x = x;
this.y = y;
} var per_position = new Point(5, 5);
// 画关卡地图
function drawMap(level) {
for (var i = 0; i < level.length; i++) {
for (var j = 0; j < level[i].length; j++) {
var pic = block;
switch (level[i][j]) {
case 0:
pic = block;
break;
case 1:
pic = wall;
break;
case 2:
pic = ball;
break;
case 3:
pic = box;
break;
case 4:
pic = curMan;
per_position.x = i;
per_position.y = j;
break;
case 5:
pic = box;
break;
}
ctx.drawImage(pic, j * dWidth - (pic.width - dWidth) / 2, i * dHeight - (pic.height - dHeight), pic.width, pic.height);
}
}
} // 切换关卡
function level(next) {
iCurLevel += next
if (iCurLevel < 0) {
alert('当前第一关');
return;
}
if (iCurLevel > levels.length - 1) {
alert('当前最后一关');
return;
}
init();
} // 绑定键盘 up down left right
document.onkeydown = function curManUp(event) {
var keyCode = event.keyCode;
var p1 = {
x: 0,
y: 0
}
var p2 = {
x: 0,
y: 0
}
switch (keyCode) {
case 38:
curMan = up;
p1.x = per_position.x - 1;
p1.y = per_position.y;
p2.x = per_position.x - 2;
p2.y = per_position.y;
break;
case 39:
curMan = right;
p1.x = per_position.x;
p1.y = per_position.y + 1;
p2.x = per_position.x;
p2.y = per_position.y + 2;
break;
case 40:
curMan = down;
p1.x = per_position.x + 1;
p1.y = per_position.y;
p2.x = per_position.x + 2;
p2.y = per_position.y;
break;
case 37:
curMan = left;
p1.x = per_position.x;
p1.y = per_position.y - 1;
p2.x = per_position.x;
p2.y = per_position.y - 2;
break;
}
// 墙1，盒子3和墙1，盒子3和盒子3，盒子3和陷阱5,陷阱5和盒子3，陷阱5和墙1 都不能移动！
if (userMap[p1.x][p1.y] == 1) {
return false;
}
if (userMap[p1.x][p1.y] == 3 && (userMap[p2.x][p2.y] == 1 || userMap[p2.x][p2.y] == 3 || userMap[p2.x][p2.y] == 5)) {
return false;
}
if (userMap[p1.x][p1.y] == 5 && (userMap[p2.x][p2.y] == 1 || userMap[p2.x][p2.y] == 3 || userMap[p2.x][p2.y] == 5)) {
return false;
}
// 草地0 可以移动
if (userMap[p1.x][p1.y] == 0) {
userMap[per_position.x][per_position.y] = 0;
userMap[p1.x][p1.y] = 4;
}
// 盒子和草地 可以移动
if (userMap[p1.x][p1.y] == 3 && userMap[p2.x][p2.y] == 0) {
userMap[per_position.x][per_position.y] = 0;
userMap[p1.x][p1.y] = 4;
userMap[p2.x][p2.y] = 3
}
// 盒子和球 可以移动
if (userMap[p1.x][p1.y] == 3 && userMap[p2.x][p2.y] == 2) {
userMap[per_position.x][per_position.y] = 0;
userMap[p1.x][p1.y] = 4;
userMap[p2.x][p2.y] = 5
}
// 球2 可以移动
if (userMap[p1.x][p1.y] == 2) {
userMap[per_position.x][per_position.y] = 0;
userMap[p1.x][p1.y] = 4;
}
// 陷阱5和草地 可以移动
if (userMap[p1.x][p1.y] == 5 && userMap[p2.x][p2.y] == 0) {
userMap[per_position.x][per_position.y] = 0;
userMap[p1.x][p1.y] = 4;
userMap[p2.x][p2.y] = 3
}
// 陷阱5和球 可以移动
if (userMap[p1.x][p1.y] == 5 && userMap[p2.x][p2.y] == 2) {
userMap[per_position.x][per_position.y] = 0;
userMap[p1.x][p1.y] = 4;
userMap[p2.x][p2.y] = 5
} // 当前小人位置 原先是球的话
if (currenMap[per_position.x][per_position.y] == 2 || currenMap[per_position.x][per_position.y] == 5) {
userMap[per_position.x][per_position.y] = 2;
} steps++;
msg.innerHTML = "当前第：" + (iCurLevel + 1) + "关，移动步数：" + steps
drawBlock();
drawMap(userMap);
if (win()) {
level(1);
}
} // 判断是否结束
function win() {
for (var i = 0; i < currenMap.length; i++) {
for (var j = 0; j < currenMap[i].length; j++) {
if (currenMap[i][j] == 2 && userMap[i][j] !== 5 || currenMap[i][j] == 5 && userMap[i][j] !== 5) {
return false;
}
}
}
return true;
} // 初始化
init()
</script>
</body> </html>
具体注释 都很清楚了。希望大家能喜欢
oooO ↘┏━┓ ↙ Oooo ( 踩)→┃你┃ ←(死 ) \ ( →┃√┃ ← ) / \_)↗┗━┛ ↖(_/
JavaScript 推箱子游戏的更多相关文章
- JavaScript写一个小乌龟推箱子游戏
推箱子游戏是老游戏了, 网上有各种各样的版本, 说下推箱子游戏的简单实现,以及我找到的一些参考视频和实例: 推箱子游戏的在线DEMO : 打开 如下是效果图: 这个拖箱子游戏做了移动端的适配, 我使用 ...
- 用HTML5+原生js实现的推箱子游戏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- C# 推箱子游戏&对战游戏
推箱子游戏提纲,只有向右向上的操作,向左向下同理,后期需完善. namespace 推箱子 { class Program { static void Main(string[] args) { // ...
- 【CCpp程序设计2017】推箱子游戏
我的还……支持撤销!用链表实现! 题目:推箱子小游戏(基于console) 功能要求: 将p09迷宫游戏改造为“推箱子”游戏: 在地图中增加箱子.箱子目标位置等图形: 当玩家将所有箱子归位,则显示玩家 ...
- three.js 制作一个三维的推箱子游戏
今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击博客原文 ...
- 用C写一个简单的推箱子游戏（二）
下面接着上一篇随笔<用C写一个简单的推箱子游戏(一)>来写 tuidong()函数是用来判断游戏人物前方情况的函数,是推箱子游戏中非常重要的一个函数,下面从它开始继续介绍推箱子的小程序怎么 ...
- 用C写一个简单的推箱子游戏（一）
我现在在读大二,我们有一门课程叫<操作系统>,课程考查要求我们可以写一段程序或者写Windows.iOS.Mac的发展历程.后面我结合网上的资料参考,就想用自己之前简单学过的C写一关的推箱 ...
- C语言实现推箱子游戏完整代码
C语言实现推箱子游戏完整代码 前言 自己做的,可能有些代码不够工整,或者有些小问题,但游戏的基本操作是可以实现的 代码效果 代码一共分为8个部分,4个控制上下左右移动,2个判断输赢,1个统计归为的个数 ...
- javascript 推箱子游戏介绍及问题
最近没什么事情,我的一个亲戚在学校学习PHP,课程中老师让他们编写一个javascript版本的推箱子小游戏,他没什么头绪,就来问我,我当时很闲,就随口答应他包在我身上.结果真正写的时候还是花了点时间 ...
随机推荐
- Accept Xcode/iOS License to run git
在没有安装Xcode的情况下, 使用了 webstorm 的git,提示 安装xcode,安装完成后,并没有打开xcode,而是再次使用git,发现 提示 输入以下命令行: sudo xcodebui ...
- 在IIS中配置申请的SSL证书
第一步,右键服务器证书=>打开功能 第二步,右侧选择导入,将申请到的证书按窗体内容导入即可 第三步,右键需要加载证书的网站,选择编辑绑定=>类型选择https=>选择刚才导入的数字证 ...
- LVS笔试题!
1.集群分类有哪些及各自实现的目标?高可用:保持系统的稳定,防止系统出现单点故障.负载均衡:比如高并发状态下,多个机器分摊请求,从而达到负载均衡高性能运算集群:比如hadoop分布式计算框架,把多个机 ...
- idea 配置 tomcat 教程
最近在搞一个项目需要用到idea 配置tomcat,翻了翻网上的帖子发现稂莠不齐,最后决定还是自己写个吧!(其实我挺蠢的走了好多的弯路,哎~) 1.首先准备一个需要大家tomcat的工程,然后使用id ...
- ACWing 238 银河英雄传说
最近带权并查集这块比较薄弱,直接看食物链看不懂,就老实一步步来了. 有一个划分为N列的星际战场,各列依次编号为1,2,…,N. 有N艘战舰,也依次编号为1,2,…,N,其中第i号战舰处于第i列. 有T ...
- Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3) C Messy
//因为可以反转n次 所以可以得到任何可以构成的序列 #include<iostream> #include<string> #include<vector> us ...
- 洛谷P1093 奖学金
https://www.luogu.org/problem/P1093 #include <bits/stdc++.h> using namespace std; struct Node{ ...
- bzoj 1483
Description N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为1,2,2,1的四个布丁一共有3段颜色. Input 第 ...
- php设计模式之适配器模式实例代码
<?php header("Content-type:text/html;charset=utf-8"); // 适配器模式 /** * 查看天气接口 */ class Ti ...
- socket编程（python）
交互原理: 服务端和客户端通过底层socket接口编程通信,交互的信息都是通过byte字节形式传递,网络传输中不能保证信息完整传输有可能是分片传输,所以可能从缓冲区获取的信息需要分段拼接或拆分组合成一 ...