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. React Native学习（三）—— 使用导航器Navigation跳转页面

    本文基于React Native 0.52 参考文档https://reactnavigation.org/docs/navigators/navigation-prop 一.基础 1.三种类型 Ta ...

  2. 模板层（template）

    模板: 什么是模板? html+模板语法 模板语法: 1 变量:{{}} 深度查询: 通过句点符号 . 过滤器 filter {{var|filter_name}} 2 标签: {% tag %} f ...

  3. 队列的存储结构的实现(C/C++实现)

    存档 #include "iostream.h" #include "stdlib.h" #define max 20 typedef char elemtyp ...

  4. NYoj289苹果（0-1背包）

    苹果 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 ctest有n个苹果,要将它放入容量为v的背包.给出第i个苹果的大小和价钱,求出能放入背包的苹果的总价钱最大值. 输 ...

  5. iOS学习——键盘弹出遮挡输入框问题解决方案

    在iOS或Android等移动端开发过程中,经常遇到很多需要我们输入信息的情况,例如登录时要输入账号密码.查询时要输入查询信息.注册或申请时需要填写一些信息等都是通过我们键盘来进行输入的,在iOS开发 ...

  6. 如何给网站添加CNZZ站长统计功能代码的常用办法

    前几天有个客户来问小编怎么给网站添加上CNZZ站长统计工具,其实这个很简单,只要把cnzz免费代码复制到我们的footer文件就行.今天小编正好有空就来分享一下具体的操作过程. 首先要想获得这个免费的 ...

  7. SVN的安装和配置

    SVN为程序开发团队常用的代码管理,版本控制软件:下面我们来介绍TortoiseSVN的安装,和其服务器的搭建:(下面为windows 64位系统下的搭建) 闲来无事,就在本地搭建了一个SVN环境,网 ...

  8. 前端之CSS介绍--选择器

    一.CSS简介 介绍 css我们称呼层叠样式表(英文全称:Cascading Style Sheets).它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等 ...

  9. c语言统计一个文件中的单词，字符和行数

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  10. iptables中DNAT、SNAT和MASQUERADE的理解

    转:http://blog.csdn.net/yu_xiang/article/details/9212543 DNAT(Destination Network Address Translation ...