1. 新建index.html
1.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>推箱子</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
}
#game {
width: 560px;
margin: 0 auto;
}
#canvas {
background: #fff;
}
#msg {
color: #fff;
font-size: 16px;
height: 40px;
line-height: 40px;
background-color: #000;
}
#btn {
height: 50px;
line-height: 50px;
background-color: #FFF;
}
#btn input {
height: 30px;
width: 100px;
-webkit-appearance: button;
}
</style>
</head>
<body>
<div id="game">
<canvas id="canvas" width="560px" height="560px"></canvas>
<div id="msg">第1关, 移动次数: 0</div>
<div id="btn">
<input type="button" id="previous" value="上一关" />
<input type="button" id="next" value="下一关" />
<input type="button" id="replay" value="重玩本关" />
<input type="button" id="descript" value="游戏说明" />
</div>
</div>
</body>
</html>1.2. 效果图
2. 图片资源
2.1. 新建images文件夹
2.2. 把图片放入images文件夹下
3. 绘制游戏地图
3.1. 获取画布
3.2. 绘制砖块
3.2.1. 绘制砖块代码
3.2.2. 绘制砖块效果图
3.3. 画布大小设置为560px * 560px, 我们设置为16 * 16的矩阵, 矩阵元素的大小35px * 35px。我们砖块的图片大小也是35px * 35px。
3.4. 绘制砖块矩阵
3.4.1. 代码
3.4.2. 效果图
3.5. 绘制小球
3.5.1. 小球的大小是30 * 30
3.5.2. 绘制小球代码
3.5.3. 由于小球的大小是30 * 30, 砖块的大小是35 * 35, 所以小球并没有在砖块的中心显示。
3.5.4. 调整绘制小球起始位置代码
3.5.5. 调整绘制小球起始位置后效果图
3.6. 在第三行(i)第四列(j)绘制人物
3.6.1. 人物图片大小
3.6.2. 代码
3.6.3. 效果图
3.6.4. 人物偏下, 调整高度起始位置
3.6.5. 效果图
3.7. 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>推箱子</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
}
#game {
width: 560px;
margin: 0 auto;
}
#canvas {
background: #fff;
}
#msg {
color: #fff;
font-size: 16px;
height: 40px;
line-height: 40px;
background-color: #000;
}
#btn {
height: 50px;
line-height: 50px;
background-color: #FFF;
}
#btn input {
height: 30px;
width: 100px;
-webkit-appearance: button;
}
</style>
</head>
<body>
<div id="game">
<canvas id="canvas" width="560px" height="560px"></canvas>
<div id="msg">第1关, 移动次数: 0</div>
<div id="btn">
<input type="button" id="previous" value="上一关" />
<input type="button" id="next" value="下一关" />
<input type="button" id="replay" value="重玩本关" />
<input type="button" id="descript" value="游戏说明" />
</div>
</div>
<script type="text/javascript">
// 获取画布
var can = document.getElementById('canvas');
// 获取画笔(实际上是CanvasRenderingContext2D对象)
var ctx = can.getContext("2d");
// 创建砖块图片
var block = new Image();
// 图片加载完成回调函数
block.onload = function(){
// 绘制砖块
// ctx.drawImage(block, 0, 0, block.width, block.height);
for(let i = 0; i < 16; i++){ // i代表行
for(let j = 0; j < 16; j++){ // j代表列
ctx.drawImage(block, j*block.width, i*block.height, block.width, block.height);
}
}
};
block.src = 'images/block.gif';
var w = 35, h = 35; // w矩阵元素的宽度, h矩阵元素的高度
// 创建小球图片
var ball = new Image();
ball.onload = function(){
// 从0,0的位置绘制小球
// ctx.drawImage(ball, 0, 0, ball.width, ball.height);
ctx.drawImage(ball, (w - ball.width) / 2, (h - ball.height) / 2, ball.width, ball.height);
};
ball.src = 'images/ball.png';
// 创建人物图片
var man = new Image();
man.onload = function(){
for(let i = 0; i < 16; i++){
for(let j = 0; j < 16; j++){
if(i == 2 && j == 3){
// 绘制人物
// ctx.drawImage(man, j * w + (w - man.width) / 2, i * h + (h - man.height) / 2, man.width, man.height);
// 去掉除以2, 整个人物多出的高度全部向上偏移
ctx.drawImage(man, j * w + (w - man.width) / 2, i * h + (h - man.height), man.width, man.height);
}
}
}
};
man.src = 'images/down.png';
</script>
</body>
</html>
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
