1、效果图

2、代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script type="text/javascript">

        var maps = new Array(15);

        for (var i = 0; i < 15; i++) {

            maps[i] = new Array(15);

            for (var j = 0; j < 15; j++) {

                maps[i][j] = 0;

            }

        }

        var isBlack= true;

        // 初始化图片

        var black = new Image();

        var white = new Image();

        black.src = "htm5_canvas/img/black.png";

        white.src = "htm5_canvas/img/white.png";

        var can;

        var ctx;

        // 初始化棋盘

        function init() {

            can = document.getElementById("can");

            ctx = can.getContext("2d");

            ctx.strokeStyle = "#FFF";

            for (var i = 0; i < 15; i++) {

                for (var j = 0; j < 15; j++) {

                    ctx.strokeRect(j * 40, i * 40, 40, 40);

                }

            }

        }

        // 下子

        function play(e) {

            var leftOffset = 11;

            var x = e.clientX - leftOffset;

            var y = e.clientY - 11;

            var col = parseInt((e.clientX - 20) / 40) + 1;

            var row = parseInt((e.clientY - 20) / 40) + 1;

            if (isBlack) {

                ctx.drawImage(black, col * 40 - 20, row * 40 - 20);

                isBlack = false;

            }

            else {

                ctx.drawImage(white, col * 40 - 20, row * 40 - 20);

                isBlack = true

            }

        }

    </script>

</head>

<body onload="init();">

        <canvas id="can" width="600" height="600" onclick="play(event);" style="background:url(htm5_canvas/img/bak.jpg)"></canvas>

</body>

</html>

3、总结用到的知识点Canvas

Html5五子棋的更多相关文章

  1. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  2. HTML5 五子棋 - JS/Canvas 游戏

    背景介绍 因为之前用c#的winform中的gdi+,java图形包做过五子棋,所以做这个逻辑思路也就驾轻就熟,然而最近想温故html5的canvas绘图功能(公司一般不用这些),所以做了个五子棋,当 ...

  3. 7款值得你心动的HTML5动画和游戏

    1.HTML5 Canvas粒子效果文字动画特效 之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示 ...

  4. 经典的HTML5游戏及其源码分析

    HTML5已经相当强大,在HTML5平台上,我们可以完成很多非常复杂的动画效果,包括游戏在内.早期我们只能利用flash来实现网络游戏,现在我们又多了一种选择,即用HTML5制作游戏.相比flash, ...

  5. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

  6. js+html5双人五子棋(源码下载)

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  7. 利用开源HTML5引擎lufylegend.js结合javascript实现的五子棋人机对弈

    前言     本文主要介绍利用开源引擎 lufylegend.js开发基于Html5的游戏--五子棋,主要叙述其详细开发过程. 游戏规则 玩过五子棋的都应该知道五子棋的规则,这里就简单介绍其规则. 1 ...

  8. html5 canvas 五子棋游戏

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. HTML5游戏，五子棋

    在线演示 本地下载 最近html5的游戏还真是不少,这种在线游戏既简单又有趣.收藏几个在午休时间娱乐一下.何乐而不为呢?喜欢研究的可以下载代码看看.超级推荐!

随机推荐

  1. MYSQL的REPLACE和ON DUPLICATE KEY UPDATE使用

    REPLACE 我们在使用数据库时可能会经常遇到这种情况.如果一个表在一个字段上建立了唯一索引,当我们再向这个表中使用已经存在的键值插入一条记录,那将会抛出一个主键冲突的错误.当然,我们可能想用新记录 ...

  2. Flask中的单例模式

    1,基于文件的单例模式: import pymysql import threading from DBUtils.PooledDB import PooledDB class SingletonDB ...

  3. ajax中url赋json格式的值时发生中文乱码的相关问题

    具体流程:转入到jsp界面时会加载ajax,ajax转到url时传带hide在jsp界面的值titleString,其来源见下面的代码. String title=new String("\ ...

  4. AFO

    留坑 有点绝望 状态什么的,存在么 upd at 2017/11/14还算完满地结束了OI之路了吧.

  5. HDU 2079 dp解法

    选课时间(题目已修改,注意读题) Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  6. git学习四：eclipse使用git提交项目

    支持原创:http://blog.csdn.net/u014079773/article/details/51595127 准备工作: 目的:eclipse使用git提交本地项目,提交至远程githu ...

  7. 在vue-cli项目中使用echarts

    这个示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --regist ...

  8. [国嵌攻略][090][linux网络编程模型]

    编程模型 Socket的实质就是一个接口,利用该接口,用户在使用不同的网络协议时,操作函数得以统一.而针对不同协议的差异性操作,则交给了Socket去自行解决. TCP编程模型 UDP编程模型

  9. linux下 ls -l 命令显示结果每一列代表什么意思

    第一个栏位,表示文件的属性.Linux的文件基本上分为三个属性:可读(r),可写(w),可执行(x).但是这里有十个格子可以添(具体程序实现时,实际上是十个bit位).第一个小格是特殊表示格,表示目录 ...

  10. Java 获得Class的绝对路径方法

    Java获得class文件的绝对路径:1.e.g. Foo.class => Foo.class.getResuorce("").getFile(); 该方法在eclipse ...