第九讲：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 ...
随机推荐
- hdu2066一个人的旅行(dijkstra)
Problem Description 虽然草儿是个路痴(就是在杭电待了一年多,居然还会在校园里迷路的人,汗~),但是草儿仍然很喜欢旅行,因为在旅途中 会遇见很多人(白马王子,^0^),很多事,还能丰 ...
- SaaS怎样改变了商务世界
当下,全球的经济环境愈发复杂,竞争日益激烈,这就要求企业负责人高速适应和调整战略应对挑战.假设你的企业可以优化内部操作流程,走在新技术的前沿,你就行减少成本.改善服务质量.没有及时应对的企业非常快就会 ...
- Web工程师的工具箱 | 酷壳 - CoolShell.cn
Web工程师的工具箱 | 酷壳 - CoolShell.cn Web工程师的工具箱 2012年12月19日 陈皓 发表评论 阅读评论 30,168 人阅读 本文出自Ivan Zuzak 的&l ...
- UML它 时序图
在本文中,我们重点谈谈UML时序图,UML包括在主时序图的建模元素:对象(Actor).生命线(Lifeline).聚焦控制(Focusofcontrol).消息(Message)等等. 一.UML时 ...
- mysql增量ID
启动值更改方法
在mysql很多朋友感到场AUTO_INCREMENT增量型ID值它不能被改变,其实这种认识是错误的,这里mysql增量ID开始值更改和设置. 设置自动递增字段的通常的方法: 格时加入: create ...
- 7款开源Java反编译工具
今天我们要来分享一些关于Java的反编译工具,反编译听起来是一个非常高上大的技术词汇,通俗的说,反编译是一个对目标可执行程序进行逆向分析,从而得到原始代码的过程.尤其是像.NET.Java这样的运行在 ...
- Android Graphics专题（1）--- Canvas基础
作为Android Graphics专题的开篇.毫无疑问,我们将讨论Android UI技术的核心概念--Canvas. Canvas是Android UI框架的基础,在Android的控件体系中.全 ...
- 努比亚 Z5 mini刷机包 omni4.4.2改动V4.0 自用版 精简 MIUI特效
ROM介绍: 第一版: 1.基于lwang适配的omni4.4.2第二版改动,少量精简改动 2.设置加入"自启项管理",体验更快.更顺滑 3.替换特效为XUI特效 4.改动host ...
- [HDU 1427]速度计算24点(DFS暴力搜索)
主题连接: pid=1427">http://acm.hdu.edu.cn/showproblem.php?pid=1427 思路:简单的DFS.dfs(sum,next,p)表 ...
- Linux 该文件命令查看内容
Linux系统,请使用以下命令来查看文件的内容: cat tac 从最后一行開始显示.能够看出 tac 是 cat 的倒著写! nl 显示的时候,顺道输出行号! more 一页一页的显示文件内容 ...