第九讲：HTML5该canvas推箱子原型实现
<html>
<head>
<title>动</title>
<script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script>
<style type="text/css">
body{margin:0px;padding:0px;}
#main{margin: 100 auto 0 auto;border: 10px solid #030303;width:300px;height:460px;border-radius:10px;}
</style>
</head> <body>
<div id="main">
<canvas id="mc" width="300px" height="460px">
</canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById('mc');
var cxt = canvas.getContext('2d');
//定义背景的颜色
function init_background(){
cxt.fillStyle = "#6A6C6C";
cxt.fillRect(0,0,canvas.width,canvas.height);
cxt.fill();
}
//定义移动的红方块
var red_diamond = {
x : 200,
y : 100,
width : 20,
height : 20,
color : "#FC0000"
}
//初始化红小方块的方法
function init_red_diamond(){
cxt.fillStyle = red_diamond.color;
cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);
cxt.fill();
}
//定义将被空方块移动的黄方块
var yellow_diamond = {
x : 100,
y : 200,
width : 20,
height : 20,
color : "#F2FA0A"
}
//初始化黄小方块的方法
function init_yellow_diamond(){
cxt.fillStyle = yellow_diamond.color;
cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);
cxt.fill();
}
//消除黄小方块的方法
function clear_yellow_diamond(){
cxt.fillStyle = "#6A6C6C";
cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);
cxt.fill();
}
//消除红小方块的方法
function clear_red_diamond(){
cxt.fillStyle = "#6A6C6C";
cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);
cxt.fill();
}
//定义四个方法，分别控制红小方块四个方向的移动
function move_right_red_diamond (){//右边
if(red_diamond.x + red_diamond.width + 5 <= canvas.width){
//清除曾经的方块
clear_red_diamond();
cxt.fillStyle = red_diamond.color;
red_diamond.x += 20;
cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);
cxt.fill();
}
}
function move_left_red_diamond(){
if(red_diamond.x - 5 >= 0 ){
//清除曾经的方块
clear_red_diamond();
cxt.fillStyle = red_diamond.color;
red_diamond.x -= 20;
cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);
cxt.fill();
}
}
function move_up_red_diamond(){
if(red_diamond.y - 5 >= 0 ){
//清除曾经的方块
clear_red_diamond();
cxt.fillStyle = red_diamond.color;
red_diamond.y -= 20;
cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);
cxt.fill();
}
}
function move_down_red_doamond(){
if(red_diamond.y + red_diamond.height + 5 <= canvas.height){
//清除曾经的方块
clear_red_diamond();
cxt.fillStyle = red_diamond.color;
red_diamond.y += 20;
cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);
cxt.fill();
}
}
//定义一个方法用户推断红方块在小方块的哪一方
var red_diamond_to_yellow_diamond = "";
function red_diamond_position (){
if(red_diamond.x + red_diamond.width == yellow_diamond.x && red_diamond.y == yellow_diamond.y){
red_diamond_to_yellow_diamond = "left";
}
if(red_diamond.x == yellow_diamond.x + yellow_diamond.width && red_diamond.y == yellow_diamond.y){
red_diamond_to_yellow_diamond = "right";
}
if(red_diamond.y + red_diamond.height == yellow_diamond.y && red_diamond.x == yellow_diamond.x){
red_diamond_to_yellow_diamond = "top";
}
if(red_diamond.y == yellow_diamond.y + yellow_diamond.height && red_diamond.x == yellow_diamond.x){
red_diamond_to_yellow_diamond = "down";
}
}
//定义四个方法来移动黄色小方块
function move_right_yellow_diamond (){//右边
if(yellow_diamond.x + yellow_diamond.width + 5 <= canvas.width){
//清除曾经的方块
clear_yellow_diamond();
cxt.fillStyle = yellow_diamond.color;
yellow_diamond.x += 20;
cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);
cxt.fill();
}
}
function move_left_yellow_diamond(){
if(yellow_diamond.x - 5 >= 0 ){
//清除曾经的方块
clear_yellow_diamond();
cxt.fillStyle = yellow_diamond.color;
yellow_diamond.x -= 20;
cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);
cxt.fill();
}
}
function move_up_yellow_diamond(){
if(yellow_diamond.y - 5 >= 0 ){
//清除曾经的方块
clear_yellow_diamond();
cxt.fillStyle = yellow_diamond.color;
yellow_diamond.y -= 20;
cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);
cxt.fill();
}
}
function move_down_yellow_doamond(){
if(yellow_diamond.y + yellow_diamond.height + 5 <= canvas.height){
//清除曾经的方块
clear_yellow_diamond();
cxt.fillStyle = yellow_diamond.color;
yellow_diamond.y += 20;
cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);
cxt.fill();
}
} //获取键盘点击的事件，以推断小方块想哪里移动
var direction = "";
document.onkeydown = function (e) {
red_diamond_position();
if (e.keyCode == 39 ){
if(red_diamond_to_yellow_diamond == "left" && red_diamond.x + red_diamond.width * 2 + 5 <= canvas.width ){
move_right_yellow_diamond();
move_right_red_diamond();
}else{
if(red_diamond_to_yellow_diamond != "left"){
red_diamond_to_yellow_diamond = "";
move_right_red_diamond();
}
}
};
if (e.keyCode == 37 ) {
if(red_diamond_to_yellow_diamond == "right" && red_diamond.x - 5 - red_diamond.width >= 0){
move_left_yellow_diamond();
move_left_red_diamond();
}else{
if(red_diamond_to_yellow_diamond != "right"){
move_left_red_diamond();
red_diamond_to_yellow_diamond = "";
}
}
};
if (e.keyCode == 38 ){
if(red_diamond_to_yellow_diamond == "down" && red_diamond.y - 5 - red_diamond.height >= 0){
move_up_yellow_diamond();
move_up_red_diamond();
}else{
if(red_diamond_to_yellow_diamond != "down"){
move_up_red_diamond();
red_diamond_to_yellow_diamond = "";
}
}
};
if (e.keyCode == 40 ){
if(red_diamond_to_yellow_diamond == "top" && red_diamond.y + red_diamond.height * 2 + 5 <= canvas.height){
move_down_yellow_doamond();
move_down_red_doamond();
}else{
if(red_diamond_to_yellow_diamond != "top"){
move_down_red_doamond();
red_diamond_to_yellow_diamond = "";
}
}
};
}
//初始化
init_background();
init_red_diamond();
init_yellow_diamond();
move_diamond();
</script>
</body>
</html>
版权声明：本文博主原创文章，博客，未经同意不得转载。
第九讲：HTML5该canvas推箱子原型实现的更多相关文章
- 用HTML5+原生js实现的推箱子游戏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript 推箱子游戏
推箱子游戏的 逻辑非常简单,但是如果不动手的话,还是不太清楚.我在这里讲一下自己的思路. 制作推箱子,首先要有自己的设计素材.如下我也是网上找的素材 第二步,理清游戏的规则. 游戏规则: 1.小人将箱 ...
- C++学习（三十七）（C语言部分）之 链式栈（推箱子实现）
用链表实现栈一开始在表头插入,就要一直在表头插入一开始在表尾插入,就要一直在表头插尾表头当栈底 也可以把表尾当栈底 实现的测试代码笔记如下: #include<stdio.h> #incl ...
- SJTU T4143 推箱子
问题描述 推箱子是一款经典的小游戏.游戏要求玩家将若干个箱子推到指定的位置,并以箱子移动次数最少作为目标. 现在,我们只需要考虑一个简化的版本--只有一个箱子.对于一张给定的地图,你需要判断是否可以将 ...
- OC推箱子
#include<stdio.h> #include<stdlib.h> int main(void) { char sr;//存储用户输入的指令 //绘制地图 char a[ ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- c语言游戏推箱子
前两天做了推箱子小游戏,看似简单的一个小游戏背后却 有巨大的秘密,这秘密就是一大堆逻辑. 自从学习了函数过后,的确是解决了很多问题,而且调用很方便,尽管我现在都不是很会调用. 写完一个函数,准备测试一 ...
- HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
- HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
随机推荐
- 七古·夏泳小梅沙
七古·夏泳小梅沙 文/天地尘埃2020 近日与同学等海泳小梅沙,归后背黑而焦灼如针刺.一周后焦皮始脱尽,发现还是往日那个黄种人.涂鸦一文以记之. 一湾碧水青山前, 夏日方来酷暑煎. 疏狂仅仅愿清凉刻, ...
- Apache配置虚拟文件夹
作为一个Android开发人员,一直以为,至少应该有一个server语言,最近慢慢学习php,当然学习Apache使用.本文介绍Win7环境下,怎样配置Apache的虚拟文件夹. 首先,找到我们Apa ...
- spring集成 JedisCluster 连接 redis3.0 集群
最近在公司做了 jedisCluster整合spring 的配置, 分享如下 客户端采用最新的jedis 2.7 1. maven依赖: <dependency> <groupId& ...
- hdu3001（状压dp）
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=3001 题意:n 个城市已经 m 条路 以及对应路费 c,要求遍历所有城市最少的路费,每个城市不能超过2 ...
- R12 付款过程请求-功能和技术信息 (文档 ID 1537521.1)
In this Document Abstract History Details _afrLoop=2234450430619177&id=1537521.1&dis ...
- Unity3d socket通信 切换到web版本时报错SecurityException解决办法
原文地址:传送门 今天苦战了一天,就跟一个Unity切换到web平台的socket通信出错苦苦纠缠了一天,问了好多大牛,但他们的回复都是我没搞过web平台下的通信或者我只专研于pc或者移动平台.看来没 ...
- Linux系统时间和硬件时间设置
在Linux中有硬件时钟与系统时钟两种时钟.硬件时钟是指主机板上的时钟设备,也就是通常可在BIOS画面设定的时钟.系统时钟则是指kernel中的时钟.所有Linux相关指令与函数都是读取系统时钟的设定 ...
- HttpClient请求服务器代码优化版
HttpClient请求服务器代码优化版 首先,我在前面的两篇博文中介绍了在 Android中,除了使用java.net包下HttpUrlConnection的API访问HTTP服务之外,我们还可以换 ...
- Qt--将Qt 动态链接生成的exe及依赖dll打包方法
Qt静态编译链接生成的exe文件,不需依赖dll,可以独立运行,发布很方便. 但绝大多数用的都是Qt开源版本,如果用静态链接,会有些限制. 方法之一,就是用动态编译,然后把exe和需要的dll整合成一 ...
- My97 DatePicker
支持日期以及时分秒的选择, 国人开发, 还不错! 官网: http://www.my97.net/