第九讲：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 ...
随机推荐
- 2013 吉林通化邀请赛 Tutor 有点坑的水题
计算12个数的和的平均数.四舍五入,不能有后导0. 我的做法是,将答案算出后,乘以1000,然后看个位是否大于等于5,判断是否要进位…… #include<iostream> #inclu ...
- [gkk]传智-适配器设计模式，如同电源适配器
//适配器设计模式 是图形化设计中用的.如同电源适配器 import java.awt.*; inport java.awte public calss MyFrame{ public static ...
- keil提示：missing ';' before 'XXX'但又找不到是哪里少了分号——已解决！
今天写一个51程序,keil在编译时总提示丢失了一个分号,但怎么都找不到是哪里丢失了分号,搞了一下午才解决问题,现在把经验在此分享,以求让他人不要犯同样的错误!提示信息为: LCD12864.H(20 ...
- 传京东副总裁蒉莺春或将接管POP业务-搜狐IT
传京东副总裁蒉莺春或将接管POP业务-搜狐IT 传京东副总裁蒉莺春或将接管POP业务
- Mysql怎样删除以“#sql-”开头的暂时表
author:skate time:2014/09/28 Mysql怎样删除以"#sql-"开头的暂时表 现象:在重建索引后,发现Mysqlserver的磁盘空间快满了 在用例如以 ...
- java中浮点数的比较（double, float)(转)
问题的提出:如果我们编译运行下面这个程序会看到什么? public static void main(String args[]){ System.out.println(0.05+0.01); Sy ...
- Python数据结构之注意事项
1.列表 列表是Python中使用最频繁的数据结构,列表提供很多函数操作,比如下标存取,分片,index,append,remove等等. 例如: list=[1,2,'hello','python ...
- [置顶] 生成学习算法、高斯判别分析、朴素贝叶斯、Laplace平滑——斯坦福ML公开课笔记5
转载请注明:http://blog.csdn.net/xinzhangyanxiang/article/details/9285001 该系列笔记1-5pdf下载请猛击这里. 本篇博客为斯坦福ML公开 ...
- unity3d由于Camera.main.transform报空引用错误的解决方案
今天在导入character包后,引用了内置的第三人称素材,但是在启动的时候程序报空引用的错误: 引起错误的位置在: 错误原因是因为没有将摄像机的tag设置为maincamera,改为maincame ...
- Java中读取某个目录下的所有文件和文件夹
import java.io.File; public class Test1 { public static void main(String[] args) { String path=" ...